<template>
	<div>
		<div class="tableNavBox">
			<formTemplate :formSet="formSet1" :postData="formData1" :optionData="optionData">
				<template slot="baseLocation" slot-scope="scope">
					<el-form-item label="基地位置：" style="width:500px">
						<el-select v-model="formData1.baseId" @change="baseLocationChange" style="width:460px" placeholder="请选择">
						    <el-option
						      v-for="item in baseData"
						      :key="item.id"
						      :label="item.baseLocation"
						      :value="item.id">
						    </el-option>
						  </el-select>
						  <img style="float: right;" src="@/assets/image/digitalOrchard/dingwei.png"
						  alt="" class="locationBtn" @click="flyingFigure"/>
					</el-form-item>
				</template>
				<template slot="customerName" slot-scope="scope">
					<el-form-item label="客户名称：" style="width:500px">
						<!-- <el-select
  						  	v-model="formData1.baseName"
  						  	remote
  						  	reserve-keyword
  						  	placeholder="请选择公司名称"
  						  	:loading="loading"
							style="width:500px"
							@change="handleChange">
  						  	<el-option
  						  	  v-for="(item,index) in optionData.supplierId"
  						  	  :key="index"
  						  	  :label="item.name"
  						  	  :value="item.value">
  						  	</el-option>
  						</el-select> -->
						  <el-select
  						  	v-model="formData1.baseName"
  						  	filterable
  						  	remote
  						  	reserve-keyword
  						  	placeholder="请输入公司名称"
  						  	:remote-method="getCompaniesByKey"
  						  	:loading="loading"
							style="width:500px"
							@change="handleChange">
  						  	<el-option
  						  	  v-for="(item,index) in optionData.supplierId"
  						  	  :key="index"
  						  	  :label="item.name"
  						  	  :value="item.value">
  						  	</el-option>
  						</el-select>
					</el-form-item>
            	</template>
				<template slot="baseName" slot-scope="scope">
					<el-form-item label="基地名称：" style="width:500px">
						  <el-select
  						  	v-model="formData1.baseName"
  						  	filterable
  						  	remote
  						  	reserve-keyword
  						  	placeholder="请输入公司名称"
  						  	:remote-method="getCompaniesByKey"
  						  	:loading="loading"
							style="width:500px"
							@change="handleChange">
  						  	<el-option
  						  	  v-for="(item,index) in optionData.supplierId"
  						  	  :key="index"
  						  	  :label="item.name"
  						  	  :value="item.value">
  						  	</el-option>
  						</el-select>
					</el-form-item>
            	</template>
				<template slot="area" slot-scope="scope" >
					<div style="display:flex;justify-content: start">
						<el-form-item label="基地面积：" style="width:300px" label-width="100px">
							<el-input v-model="formData1.area" style="width:200px" :disabled="isDetail">
								<template slot="append">亩</template>
							</el-input>
                    	</el-form-item>
						<el-form-item label="圈定面积：" style="width:260px" label-width="100px">
							<el-input v-model="formData1.fixedArea" style="width:200px" :disabled="true" placeholder="请编辑基地">
								<template slot="append">亩</template>
							</el-input>
                    	</el-form-item>
						<!-- <el-button style="width:60px;height:32px;margin-left:40px" type="primary" @click="selectMap" :disabled="isDetail">圈定</el-button> -->
					</div>
				</template>
			</formTemplate>
			<div style="clear:both"></div>
			<!-- 地图 -->
			<div class="mapBox">
				<!-- <BIGENAP ref="BIGENAP" :variety="variety" id="base" :baseId="formData1.id" :baseName="formData1.baseName" :baseType="formData1.id?'':'noBaseId'" :configs="mapConfig" @cacheData="cacheData" :key="bigemapKey"></BIGENAP> -->
				<mars3d ref="mars3ds" :baseLatLng="baseLatLng" :isAdd="isAdd" :linkBtn="linkBtn" :baseId="cacheId" @cacheData="cacheData"></mars3d>
			</div>
			<div style="clear:both"></div>
		</div>
		
	</div>
</template>

<script>
    import formTemplate from '@/components/form.vue'	
	import BIGENAP from '@/components/newMap.vue'
	export default {
		components: {
            formTemplate,
			BIGENAP
		},
		data() {
			return {
				mapConfig:{
					isOpenEditor: false, // 是否打开编辑
					isShowEditorBtn: true,
					maxZoom: '',
					mapUrl: ''
				},
                formSet1:[
                    { span: 24, label: '客户名称：', prop: 'customerName', type: 'select' ,labelWidth:'500px' },
                    { span: 24, label: '基地名称：', prop: 'baseName', type: 'select' ,labelWidth:'500px'},
                    { span: 24, label: '基地位置：', prop: 'baseLocation', type: 'input' ,labelWidth:'500px'},
                    { span: 24, label: '基地面积：', prop: 'area', type: 'slot',},
                ],
				optionData:{
					baseName:[],
					supplierId:[],
				},
                formData1:{
					baseLocation: '',
					baseId: ''// 选中的基地
				},
				companyId: this.$store.state.company.companyId,
				companyName: this.$store.state.company.companyName,
				userId: '',
				// mistiming: '0', // 所选时间的差值
				// uploadLoading: false,
				postData: {
				},
				loading:false,
				baseData: '' ,// 拿到的基地数据
				// 选中的基地坐标
				baseLatLng: [],
				mapKey: new Date().getTime(),
			}
		},
		created() {
			this.$store.commit('industrialis_leftNavIndex', 21)
			this.getQueryList()
			this.getPageData()
		},
		mounted() {
			const editorMapData = JSON.parse(sessionStorage.getItem('editorMapData'))
			if(editorMapData){
				this.formData1 = editorMapData
				this.optionData.supplierId = this.formData1.list
				sessionStorage.removeItem('editorMapData')
			}
			// this.editorMapUrl = `http://192.168.0.108:3301#${encode(this.mapDatas)}`
		},
		watch: {
			'formData1.baseName'(e){
				// console.log(e);
				this.$request.get(this.$napi.queryBaseList, {companyId: e}).then(res=>{
					if(res.code == 200){
						// 选择客户之后，初始化赋值
						this.baseData = res.data
						if(this.baseData){
							this.formData1.baseId = this.baseData[0].id
							this.formData1.baseLocation = this.baseData[0].baseLocation
							this.formData1.area = this.baseData[0].area
							this.formData1.colorRail = this.baseData[0].colorRail
							this.baseLatLng.push(this.baseData[0].latitude)
							this.baseLatLng.push(this.baseData[0].longitude)
							// this.baseLatLng.lat = this.baseData[0].latitude
							// this.baseLatLng.lng = this.baseData[0].longitude
							this.mapKey = new Date().getTime()
						}
						
					}
				})
			}
		},
		methods: {
			cacheData(){
				// this.formData1.list = this.optionData.supplierId
				// return this.formData1
				
				try{
					console.log(this.optionData)
					this.formData1.list = this.optionData.supplierId
					sessionStorage.setItem('editorMapData', JSON.stringify(this.formData1))
				}catch(e){
					//TODO handle the exception
					this.$message.error('数据保存失败')
				}
			},
			flyingFigure(){
				// 飞图---------到指定位置
				// console.log(this.baseLatLng)
				// this.$refs.BIGENAP.flyingFigure(this.baseLatLng, 17)
				this.$refs.mars3ds.flyTo(this.baseLatLng)
				// this.$refs.mars3ds.flyTo([106.468095,29.591354])
				// console.log(this.$refs.mars3ds)
				
			},
			// 基地选中后数据赋值
			baseLocationChange(e){
				this.formData1.baseId = e
				this.baseData.some(item => {
					if(item.id == e){
						// console.log(item)
						this.formData1.area = item.area
						this.formData1.colorRail = item.colorRail
						this.baseLatLng.lat = item.latitude
						this.baseLatLng.lng = item.longitude
					}
				})
			},
			getCompaniesByKey(e){
				this.$request.postForm(this.$api.getCompaniesByKey, {
					keyWord:e
				}).then(res=>{
					if(res.code == 200){
						this.optionData.supplierId = res.data.map(item =>{
							return{
								name:item.supplierName,
								value:item.supplierId,
								createUserId:item.createUserId,
								createUserName:item.createUserName
							}
						})
					}
				})
			},
			getPageData(){
				this.$request.get(this.$napi.queryCustomerList, {
					id: '',
					companyId: this.companyId
				}).then(res=>{
					if(res.code == 200){
						this.optionData.supplierId = res.data.items.map(item =>{
							return{
								name:item.companyName,
								value:item.companyId
							}
						})
					}
				})
			},
			handleChange(e){
				// console.log(this.optionData.supplierId);
				this.optionData.supplierId.forEach(item =>{
					if(item.value == e){
						// this.formData2.createUserName = item.createUserName
						// this.formData2.createUserId = item.createUserId
						// console.log(e)
						// this.$request.get(this.$napi.queryBaseList, {companyId: e}).then(res=>{
						// 	if(res.code == 200){
						// 		this.baseData = res.data[0]
						// 		this.formData1.baseLocation = this.baseData.baseLocation
						// 		// this.formData1.baseLocation = item.baseLocation
						// 		console.log(this.formData1)
						// 	}
						// })
					}
				})
			},
			getQueryList(){
				if(this.$store.state.company.companyId){
					this.$request.postForm(this.$api.queryList, {
					companyId: this.companyId,
					page:this.page,
					pageSize:this.pageSize
					}).then(res=>{
						if(res.code == 200){
							this.optionData.baseName = res.data.items.map(item =>{
								return{
									name:item.baseName,
									value:item.id,
									baseLocation:item.baseLocation
								}
							})
						}
					})
				}
				
			},
		},
		// destroyed() {
		// 	try{
		// 		sessionStorage.removeItem('editorMapData')
		// 	}catch(e){
		// 		//TODO handle the exception
		// 		this.$message.error('数据清楚失败')
		// 	}
		// }
	}
</script>

<style scoped="scoped">
	.breadcrumb,
	.tableNavBox {
		margin-top: 20px;
	}

	.breadcrumb >>>span{
		color: #23B14D;
		cursor: pointer;
	}

	.checkBox{
		display: flex;
		justify-content: flex-start;
		padding-left: 20px;
	}

	.tableNavBox {
		padding-top: 0;
	}

	.tableTitle {
		font-size: 16px;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #333333;
		line-height: 30px;
	}

	.menberConTitle {
		width: 100%;
		background: #F3F3F3;
		text-align: left;
		padding: 5px 20px;
		margin-bottom: 20px;
		/* margin-top: 20px; */
	}

	.topButton {
		width: 78px;
	}

	.dialogVisible>>>.el-input__inner {
		width: 270px;
	}

	.demo-form-inline {
		color: #5C5C5C;
	}

	.formInput {
		width: 500px;
	}

	.formInputNub {
		width: 100px;
		margin-right: 10px;
	}

	.formInputDatePicker {
		width: 440px;
		margin-right: 10px;
	}

	.fileListName {
		width: 500px;
		padding: 0 30px 0 10px;
		position: relative;
		border: 1px solid #DCDCDC;
		margin-bottom: 15px;
		align-items: center;
		color: #5C5C5C;
		border-radius: 5px;
	}

	.fileListNameIcon {
		position: absolute;
		right: 10px;
		cursor: pointer;
		top: 10px;
	}

	.fileListNameIcon:hover,
	.dayNub {
		color: #23B14D;
	}

	.dayNub {
		margin: 0 5px;
	}

	.btnBox {
		width: 100%;
		margin-top: 30px;
		padding: 30px 0;
		border-top: 1px solid #DCDCDC;
		text-align: center;
	}

	.btnBox button {
		width: 100px;
	}
	.expertTag{
		margin-right: 10px;
		margin-bottom: 10px;
	}
	.mapBox{
		width: calc(100% - 40px);
		margin-left: 20px;
		height: 450px;
		margin-bottom: 40px;
	}
	.locationBtn{
		width: 18px;height: 18px;position: absolute;top: 7px;cursor: pointer;right: -90px;
	}
</style>
